<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ 
            /* background-color: slateblue; */
            /* width: ;
            height: ; */
      }
    </style>
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
   <script>
    // 返回文档中匹配的CSS选择器的所有元素节点列表
  var btn=document.querySelectorAll('button');

//   getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 得到的是伪数组
 var btn1=document.getElementsByTagName('button');
 for(var i=0;i<btn1.length;i++){
      btn1[i].onclick=function(){
        // 所有按钮背景颜色都去掉
       for(var i =0;i<btn1.length;i++){
        btn1[i].style.backgroundColor=''
       }
    //    然后让当前的元素背景颜色为slateblue
       this.style.backgroundColor='slateblue'
      }
 }
   </script> 
</body>
</html>